<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> vue的生命周期函数  </title>
    <script src="https://unpkg.com/vue@next"></script>
    
</head>
<body>
    <div id="#app"></div>
</body>
<script>
  const app = Vue.createApp({
        data(){
            return{
                message:"收购腾讯"
            }
        },
        template:"<h2>{{message}}</h2>",
    }).mount("#app")  //挂载dom到#app上 赋值一个变量vm 

    /*
      生命周期函数？
         在某一时刻自动执行的函数 注意(某一时刻 & 自动执行)
         让我们的好的控制自己的实例 操控dom节点渲染数据  
        
      自动执行函数的理解？
         先取出什么是被动函数的执行 比如写一个handleItemClick()方法 然后让模板的h2 点击后执行此事件 代码如下
         methods：{
             handleItemClick(){
                 alert("百度也收购了")
             }
         },
         template:"<h2 v-on:click="handleItemclick">{{message}} </h2>" 

      被动执行函数？
         在浏览器中查看 需要点击对应的dom元素 才会执行这个方法 这是
      自动执行函数？
         写一个methods函数 它就会自动执行 这是
         mounted(){alert("收购谷歌了")}
         这时候刷新页面 收购谷歌了 被直接抛出 没有任何操作 自动执行了这个方法 
    ！知道自动执行函数 & 被动执行函数后 再来看vue3的生命周期函数 
         

    //看这儿 
        beforeCreate( ) ：在实例生成之前会自动执行的函数    //创建前后 
        created( )      : 在实例生成之后会自动执行的函数

        beforeMount( )  : 在模板渲染完成之前执行的函数      //渲染前后 
        mounted( )      : 在模板渲染完成之后执行的函数    


        Vue3中有八个生命周期函数，
        beforeCreate( ) ：在实例生成之前会自动执行的函数
        created( ) : 在实例生成之后会自动执行的函数
        beforeMount( ) : 在模板渲染完成之前执行的函数
        mounted( ) : 在模板渲染完成之后执行的函数
        beforeUpdate ：当data中的数据变化时， 会立即自动执行的函数
        updated：当data中的数据发生变化，页面重新渲染完后，会自动执行的函数
        beforeUnmount( ) :当Vue应用失效时，会自动执行的函数
        unmounted() : 当Vue应用失效时，且DOM完全销毁之后，会自动执行


    //查看生命周期函数的先后顺序 代码如下 
        beforeCreate() {
            console.log('beforeCreate')
        },
        created() {
            console.log('created')
        },
        beforeMount() {
            console.log('beforeMount')
        },
        mounted() {
            console.log('mounted')
        },    

    
        */
</script>
</html>